import React from 'react';
import { Form, Input, Button, Card, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login } from '../../../services/api';
import { useNavigate } from 'react-router-dom';
import backgroundVideo from '../../../static/web.mp4';

const Login = () => {
  const navigate = useNavigate();

  const onFinish = async (values) => {
    try {
      console.log('登录请求参数：', values);
      const response = await login(values);
      console.log('登录响应数据：', response);
      if (response.code === 200) {
        console.log('登录成功，用户数据：', response.data);
        sessionStorage.setItem('user', JSON.stringify(response.data));
        message.success('登录成功');
        
        const targetPath = response.data.admin === 'yes' ? '/admin/assets' : '/user/assets';
        console.log('准备跳转到：', targetPath);
        
        setTimeout(() => {
          navigate(targetPath, { replace: true });
        }, 100);
      } else {
        console.log('登录失败，错误信息：', response.message);
        message.error(response.message || '用户身份验证失败');
      }
    } catch (error) {
      console.error('登录请求出错：', error);
      message.error('react请求登录失败');
    }
  };

  return (
    <div style={{ position: 'relative', height: '100vh', overflow: 'hidden' }}>
      {/* 视频背景 */}
      <video
        autoPlay
        loop
        muted
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          zIndex: -1
        }}
      >
        <source src={backgroundVideo} type="video/mp4" />
      </video>

      {/* 登录框容器 */}
      <div style={{ 
        height: '100vh', 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center',
        background: 'rgba(0, 0, 0, 0.4)' // 半透明黑色遮罩
      }}>
        <Card 
          title={<div style={{ textAlign: 'center', fontSize: '24px', color: '#1890ff' }}>资产管理系统</div>}
          style={{ 
            width: 400,
            background: 'rgba(255, 255, 255, 0.9)', // 半透明白色背景
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
          }}
        >
          <Form name="login" onFinish={onFinish}>
            <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
              <Input 
                prefix={<UserOutlined style={{ color: '#1890ff' }} />} 
                placeholder="用户名"
                size="large"
              />
            </Form.Item>

            <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
              <Input.Password 
                prefix={<LockOutlined style={{ color: '#1890ff' }} />} 
                placeholder="密码"
                size="large"
              />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                block
                size="large"
                style={{
                  height: '40px',
                  fontSize: '16px'
                }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Login; 